<template>
  <div>
    <el-dialog v-model="dialogVisible" v-bind="$attrs">
      <template #header>
        <div class="titleClass">
          {{ props.title }}
        </div>
      </template>
      <slot></slot>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  inheritAttrs: false
})
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['update:isShow'])

const isShow = defineModel('isShow')

const dialogVisible = computed({
  get: () => isShow,
  set: (val) => {
    emits('update:isShow', val)
  }
})
</script>
<style lang="scss" scoped>
.titleClass {
  text-align: center;
}
:deep(.el-dialog__body) {
  //background-color: #c7ccd2 !important;
}
</style>
